<template xmlns:el-table="http://www.w3.org/1999/html">
  <div class="dashboard-container" v-if="roleName == '管理员'">
    <h1> 员工信息管理 </h1>
    <el-dialog title="新增" :visible.sync="addButtonController" width="30%" @close="close('ruleForm')">
      <el-form :rules="roles" label-width="20%" :model="addList" ref="ruleForm">
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="addList.userName" maxlength="20" show-word-limit style="width: 80%" clearable
                    placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="userPassword">
          <el-input v-model="addList.userPassword" maxlength="20" show-word-limit style="width: 80%" clearable
                    placeholder="请输入用户密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="addList.sex">
            <el-radio label="男" value="男">男</el-radio>
            <el-radio label="女" value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="addList.idCard" maxlength="18" show-word-limit style="width: 80%" clearable
                    placeholder="请输入身份证号"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="addList.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable
                    placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addList.remark" maxlength="20" show-word-limit style="width: 80%" clearable
                    placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="add('ruleForm')">确定</el-button>
    <el-button @click="close('ruleForm')">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改" :visible.sync="updateButtonController" width="30%" @close="close('ruleForm')">
      <el-form :rules="roles" label-width="20%" :model="updateList" ref="ruleForm">
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="updateList.userName" maxlength="20" show-word-limit style="width: 80%" clearable
                    placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="userPassword">
          <el-input v-model="updateList.userPassword" maxlength="20" show-word-limit style="width: 80%" clearable
                    placeholder="请输入用户密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="updateList.sex">
            <el-radio label="男" value="男">男</el-radio>
            <el-radio label="女" value="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="updateList.idCard" maxlength="18" show-word-limit style="width: 80%" clearable
                    placeholder="请输入身份证号"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="updateList.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable
                    placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="updateList.remark" maxlength="20" show-word-limit style="width: 80%" clearable
                    placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="update('ruleForm')">确定</el-button>
    <el-button @click="close('ruleForm')">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除" :visible.sync="deleteButtonController" width="30%">
      <h3>请确认是否删除！</h3>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="deleteUser">确定</el-button>
    <el-button @click="deleteButtonController = false">取消</el-button>
      </span>
    </el-dialog>
    <el-button type="primary" style="margin-left: 10%;width: 70px" @click="addButton">新增</el-button>
    <el-input v-model="userId2" placeholder="用户ID" name="username" type="text" clearable style="margin-left: 10%;width: 150px"/>
    <el-input
      v-model="userName2"
      placeholder="用户名称"
      name="username"
      type="text"
      clearable
      style="margin-left: 40px;width: 150px"
    />
    <el-select v-model="roleName2" clearable placeholder="请选择角色" style="margin-left: 40px;width: 150px">
      <el-option
        v-for="item in roleList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-button type="primary" style="margin-left: 40px;width: 80px" @click="selectUser">查询</el-button>
    <el-button style="margin-left: 40px;width: 80px" @click="checkUser">重置</el-button>
    <el-table :data="userList" height="659px" border style="width: 100%;margin-top: 20px">
      <el-table-column align="center" fixed prop="userId" sortable label="用户ID"/>
      <el-table-column align="center" fixed prop="userName" sortable label="用户名"/>
      <el-table-column align="center" fixed prop="userPassword" sortable label="用户密码"/>
      <el-table-column align="center" fixed prop="roleName" sortable label="角色"/>
      <el-table-column align="center" fixed prop="sex" sortable label="性别"/>
      <el-table-column align="center" fixed prop="idCard" sortable label="身份证号"/>
      <el-table-column align="center" fixed prop="phoneNumber" sortable label="手机号"/>
      <el-table-column align="center" fixed prop="remark" sortable label="备注"/>
      <el-table-column align="center" sortable label="操作">
        <template v-slot="scope">
          <el-button type="text" @click="updateButton(scope.row)">修改</el-button>
          <el-button type="text" @click="deleteButton(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div v-else class="dashboard-container"><h1>您不是管理员，没有权限访问！</h1>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { deleteUser, insertUser, selectAllUser, updateUser } from '@/api/user'

export default {
  name: 'Users', computed: { ...mapGetters(['userId', 'userName', 'roleName']) },
  data() {
    return {
      userId1: this.$store.getters.userId,
      userName1: this.$store.getters.userName,
      roleName1: this.$store.getters.roleName,
      userId2: '',
      userName2: '',
      roleName2: '',
      roleList: [{ value: '员工', label: '员工' }, { value: '管理员', label: '管理员' }],
      userList: [],
      addButtonController: false,
      addList: { userName: '', userPassword: '', roleName: '', sex: '', idCard: '', phoneNumber: '', remark: '' },
      updateButtonController: false,
      updateList: {
        userTableId: '',
        userId: '',
        roleId: '',
        userName: '',
        userPassword: '',
        sex: '',
        idCard: '',
        phoneNumber: '',
        remark: ''
      },
      roles: {
        userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }, {
          min: 2,
          max: 20,
          message: '长度在 2 到 20 个字符',
          trigger: 'blur'
        }],
        userPassword: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }, {
          min: 1,
          max: 20,
          message: '长度在 6 到 20 个字符',
          trigger: 'blur'
        }],
        sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
        idCard: [{ required: true, message: '身份证号不能为空', trigger: 'blur' }, {
          min: 18,
          max: 18,
          message: '长度为18个字符',
          trigger: 'blur'
        }],
        phoneNumber: [{ required: true, message: '手机号不能为空', trigger: 'blur' }, {
          min: 11,
          max: 11,
          message: '长度为11个字符',
          trigger: 'blur'
        }],
        remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
      },
      deleteButtonController: false,
      deleteUserId: ''
    }
  },
  mounted() {
    this.selectUser()
  }, methods: {
    selectUser() {
      selectAllUser({ userId: this.userId2, userName: this.userName2, roleName: this.roleName2 }).then(response => {
        console.log(response.data)
        this.userList = response.data
      })
    }, checkUser() {
      this.userId2 = ''
      this.userName2 = ''
      this.roleName2 = ''
      this.selectUser()
    }, addButton() {
      this.addList = { userName: '', userPassword: '', roleName: '', sex: '', idCard: '', phoneNumber: '', remark: '' }
      this.addButtonController = true
    },
    updateButton(row) {
      this.updateList = {
        userTableId: row.userTableId,
        userId: row.userId,
        roleId: row.roleId,
        userName: row.userName,
        userPassword: row.userPassword,
        sex: row.sex,
        idCard: row.idCard,
        phoneNumber: row.phoneNumber,
        remark: row.remark
      }
      this.updateButtonController = true
    },
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertUser({
            userName: this.addList.userName,
            userPassword: this.addList.userPassword,
            roleName: this.addList.roleName,
            sex: this.addList.sex,
            idCard: this.addList.idCard,
            phoneNumber: this.addList.phoneNumber,
            remark: this.addList.remark
          }).then(response => {
            this.addButtonController = false
            this.selectUser()
            this.$message({ message: '添加成功', type: 'success' })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    update(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateUser({
            userTableId: this.updateList.userTableId,
            userId: this.updateList.userId,
            roleId: this.updateList.roleId,
            userName: this.updateList.userName,
            userPassword: this.updateList.userPassword,
            sex: this.updateList.sex,
            idCard: this.updateList.idCard,
            phoneNumber: this.updateList.phoneNumber,
            remark: this.updateList.remark
          }).then(response => {
            this.updateButtonController = false
            this.selectUser()
          })
        } else {
          return false
        }
      })
    },
    close(formName) {
      this.$refs[formName].resetFields()
      this.addButtonController = false
      this.updateButtonController = false
    },
    deleteButton(row) {
      this.deleteUserId = row.userId
      this.deleteButtonController = true
    },
    deleteUser() {
      deleteUser({
        userId: this.deleteUserId
      })
        .then(response => {
          this.deleteButtonController = false
          this.selectUser()
        })
    }
  }
}
</script>
<style lang="scss" scoped> .dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
} </style>
